<!-- 首页里的热榜页面 -->
<template>
  <div id="homeHot">
    <div class="content_left_box">
      <!-- 左边头部 -->
      <div class="left_head_box">
        <router-link to="/home/recommend" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p">推荐</span></div></router-link>
        <router-link to="/home/follow" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p">关注</span></div></router-link>
        <router-link to="/home/hotList" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectStyle">热榜</span></div></router-link>
      </div>
      <!-- 左边内容切换 -->
      <div class="left_body_box">
        <!-- 热榜分类栏 -->
        <div class="hot_type_box">
          <HomeHotTypeBtn v-for="(i, index) in hotTypeList" :key="index" :hotList="i" @changeType="changeType"></HomeHotTypeBtn>
        </div>
        <HomeHotListCard v-for="(i, index) of hotList" :key="index" :list="i" :rankNum="index+1"></HomeHotListCard>
      </div>
    </div>
  </div>
</template>

<script>
import HomeHotTypeBtn from './homeCard/HomeHotTypeBtn'
import HomeHotListCard from './homeCard/HomeHotListCard'
export default {
  name: 'homeHot',
  el: '#homeHot',
  components: {
    'HomeHotTypeBtn': HomeHotTypeBtn,
    'HomeHotListCard': HomeHotListCard
  },
  data () {
    return {
      selectStyle: {'color': '#0084ff'},
      hotTypeList: [
        { 'id': 0, 'name': '全站', 'isClick': false },
        { 'id': 1, 'name': '科学', 'isClick': false },
        { 'id': 2, 'name': '数码', 'isClick': false },
        { 'id': 3, 'name': '体育', 'isClick': false },
        { 'id': 4, 'name': '时尚', 'isClick': false },
        { 'id': 5, 'name': '影视', 'isClick': false }
      ],
      hotList: []
    }
  },
  computed: {
  },
  methods: {
    changeType (data) {
      this.$set(this.hotTypeList[0], 'isClick', true)
      for (let i = 0; i < this.hotTypeList.length; i++) {
        this.$set(this.hotTypeList[i], 'isClick', false)
        if (this.hotTypeList[i].name === data) {
          this.$set(this.hotTypeList[i], 'isClick', true)
          this.getHotListData(this.hotTypeList[i].id)
        }
      }
    },
    getHotListData (v) {
      // 通过分类的id去获取排名的数据
      this.axios.get('/api/getQuestionByClassifyId', {
        params: {
          id: v
        }
      })
        .then((response) => {
          this.hotList = response.data.data
        })
        .catch((error) => {
          this.$Notice.error({
            title: '通知',
            desc: '接口，异常！'
          })
          console.info(error)
        })
    }
  },
  created () {
    this.$set(this.hotTypeList[0], 'isClick', true)
    this.getHotListData(0)
  }
}
</script>

<style scoped>
  @import '../../../../../static/css/home/HomeHotList.css';
</style>
